/*
 * 
 * Cube class
 *    
 **/

function Cube(obj) {
    var me = this,
    el = document.createElement("div"),
    faceContainer = document.createElement("div"),
    faces = [],
    i, sides = 6,
    face,
    random = Math.random,
    round = Math.round,
    size = obj.size,
    halfSize = size/2,
    translateZ = "translateZ(";
    
    
    
    me.el = el;
    el.className = "cube";
    el.style.cssText = "height: " + size + "px; width: " + size + "px;";
    
    
    me.faceContainer = faceContainer;
    faceContainer.style.cssText = "position: relative; margin: 0 auto; height: "+size+"px; width: "+size+"px; " + $.bt + ": -"+browserPrefix+"-transform 0.4s linear; -"+browserPrefix+"-transform-style: preserve-3d;float:left;";    
    el.appendChild(faceContainer);
    
    
    me.onHorseFaceShown = obj.onHorseFaceShown;
    

    
    me.currentFaceId = 0;
    me.yAngle = 0;
    
    // Face one
    
//    faces[0] = document.createElement("div");
//    faces[0].className = "face front";
//    faces[0].style.cssText = "-"+browserPrefix+"-transform: translateZ("+obj.size/2+"px)";
//    faces[0].style.height = (obj.size)+"px";
//    faces[0].style.width = (obj.size)+"px";
//    me.faceContainer.appendChild(me.faces[0]);
    
    
    // Face two
//    me.faces[1] = document.createElement("div");
//    me.faces[1].className = "face";
//    me.faces[1].style.height = (obj.size)+"px";
//    me.faces[1].style.width = (obj.size)+"px";
//    me.faceContainer.appendChild(me.faces[1]);
    
    // Face three
//    me.faces[2] = document.createElement("div");
//    me.faces[2].className = "face";
//    me.faces[2].style.height = (obj.size)+"px";
//    me.faces[2].style.width = (obj.size)+"px";
//    me.faceContainer.appendChild(me.faces[2]);
    
    // Face four
//    me.faces[3] = document.createElement("div");
//    me.faces[3].className = "face";
//    me.faces[3].style.height = (obj.size)+"px";
//    me.faces[3].style.width = (obj.size)+"px";
//    me.faceContainer.appendChild(me.faces[3]);
    
    // Face five
//    me.faces[4] = document.createElement("div");
//    me.faces[4].className = "face";
//    me.faces[4].style.height = (obj.size)+"px";
//    me.faces[4].style.width = (obj.size)+"px";
//    me.faceContainer.appendChild(me.faces[4]);
    
    // Face six
//    me.faces[5] = document.createElement("div");
//    me.faces[5].className = "face";
//    me.faces[5].style.height = (obj.size)+"px";
//    me.faces[5].style.width = (obj.size)+"px";
//    me.faceContainer.appendChild(me.faces[5]);
    
    
    
    
    me.rotateCallback = obj.rotateCallback;
    
    
    
    for(i = 0; i < sides; i++) {
        
        var r = round(100 + random() * 100),
        g = round(100 + random() * 100),
        b = round(100 + random() * 100);
        
        face = document.createElement("div");
        face.className = "face front";
        face.style.cssText = "height: " + (size)+"px; width: " + (size)+"px;background-color : rgb(" + r + "," + g + "," + b + ")";
        faceContainer.appendChild(face);
                
        faces[i] = face;
        
    }
    
    faces[0].style[$.bt] = translateZ + halfSize+"px)";
    faces[0].style.background = "url("  + obj.src + ")";
    faces[0].style.backgroundPosition = -obj.position.x + "px " + -obj.position.y + "px";
    
    faces[1].style[$.bt] = "rotateX(90deg) " + translateZ +halfSize+"px);";
    faces[2].style[$.bt] = "rotateY(90deg) " + translateZ +halfSize+"px)";
    faces[3].style[$.bt] = "rotateY(180deg) " + translateZ +halfSize+"px)";
    faces[4].style[$.bt] = "rotateY(-90deg) " + translateZ +halfSize+"px)";
    faces[5].style[$.bt] = "rotateX(-90deg) " + translateZ +halfSize+"px) rotate(180deg)";
    
    
    me.faces = faces;
    
    // TODO: we should perhaps use clickstart and clickend eventually
    el.addEventListener("mousedown", function() {
        //console.log("Cube click detected!");
        me.rotate();
    }, false);
}

Cube.prototype = {
    getEl : function() {
        return this.el;
    },
    
    quickRotate : function() {
        var me = this,
        r = "rotateX(0deg) rotateY(";
        
        me.yAngle += 90;
        
        me.faceContainer.style[$.bt] = r + me.yAngle+"deg)";
        me.faceContainer.style[$.bt] = r + me.yAngle+"deg)";
        
        me.incFaceId();        
    },
    
    rotate : function() {
        
        var me = this,
        faceContainer = me.faceContainer,
        rotateXY = "rotateX(0deg) rotateY(",
        style = faceContainer.style;
        
        var onRotationEnd = function() {
            faceContainer.removeEventListener($.bte, onRotationEnd, false);
            
            style["-" + browserPrefix+"-transition-duration"] = "0.1s";
            style[$.bt] = rotateXY+me.yAngle+"deg) translate3d(0px,0px,0px) ";
            
            me.rotateCallback.fn.apply(me.rotateCallback.scope, undefined);
        };
        
        var onTransitionEnd = function() {
            //console.log("Rotate function called!");
            
            faceContainer.removeEventListener($.bte, onTransitionEnd, false);
            
            faceContainer.addEventListener($.bte, onRotationEnd, false);
            
            me.yAngle += 90;
            style[$.btd] = "0.2s";
            style[$.bt] = rotateXY+me.yAngle+"deg)";
            
            me.incFaceId();

            

        };
        
        faceContainer.addEventListener($.bte, onTransitionEnd, false);
        style[$.btd] = "0.1s";
        style[$.bt] = rotateXY+me.yAngle+"deg) translate3d(0px,4px,4px)";  
        
        
    },
    
    
    
    shuffle : function() {
        //console.log("cube shuffling..");
        var me = this,
        nrRotations = Math.round(Math.random() * 3),
        i;
        
        for (i=0;i<nrRotations;i++) {
            me.quickRotate();
        }
    },
    
    getFaceId : function() {
        // TODO:
        return this.currentFaceId;
    },
    
    /***
     * @author Aram Taieb 2011-12-01
     * @private
     */
    incFaceId : function() {
        var me = this;
        
        me.currentFaceId += 1;
        
        if (me.currentFaceId > 3) {
            me.currentFaceId = 0;
            me.onHorseFaceShown();
        }
    }
};